<template>
	<view class="box">
		<view class="shelfBox">
			<view class="dataList">
				<view class="data" v-for="(item,index) in dataList" :key="index" @click="goPage('book',item)">
					<view class="checkBoxs" v-show="leftCheckBox">
						<checkbox-group @change="changeIds(item.fictionId)">
							<checkbox  class="check" :value="item.fictionId"/>
						</checkbox-group>
					</view>
					<view class="img">
						<image :src="item.cover" mode=""></image>
					</view>
					<view class="info">
						<view class="title">
							<text>{{item.title}}</text> 
						</view>
						<view class="descs" v-html="item.descs">
						</view>
					</view>
					<view class="">
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"bookShelf",
		props:{
			dataList:{
				type:Array,
				default:[]
			},
			leftCheckBox:{
				typr:Boolean,
				default:false
			}
		},
		data() {
			return {
				ids:[]
			};
		},
		methods:{
			changeIds(id){
				let index =  this.ids.findIndex(item=>item == id)
				if(index==-1){
					this.ids.push(id)
				}else{
					this.ids.splice(index,1)
				}
			},
			goPage(type,item){
				if(this.leftCheckBox){
					return false
				}
				uni.navigateTo({
					url:`/pages/index/${type}/chapter/chapter?item=${JSON.stringify(item)}`
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.dataList{
		padding-left: 5rpx;
	}
	.data{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-bottom: 15rpx;
		border-bottom: 1px solid #e2e2e2;
		.checkBoxs{
			.check{
			}
		}
		.img{
			image{
				width: 70rpx;
				height: 100rpx;
			}
		}
		.info{
			display: flex;
			flex-direction: column;
			margin-left: 5rpx;
			width: 600rpx;
			.title{
				font-size: 25rpx;
				font-weight: 380;
				color: black;
				padding-top: 0px;
				margin: 0px;
			}
			.descs{
				font-size: 18rpx;
				font-weight: 340;
				color: #e2e2e2;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>